AJAX এবং CodeIgniter এর মধ্যে ইন্টিগ্রেশন

Web Development - কোডইগনাইটার (Codeigniter) - CodeIgniter এর AJAX Integration |

AJAX (Asynchronous JavaScript and XML) হল একটি প্রযুক্তি যা ওয়েব পৃষ্ঠাগুলির জন্য অ্যাসিনক্রোনাস ডেটা এক্সচেঞ্জের অনুমতি দেয়, যার মাধ্যমে পৃষ্ঠা রিফ্রেশ না করেই ডেটা লোড এবং আপডেট করা যায়। CodeIgniter এর সাথে AJAX ইন্টিগ্রেশন ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে এবং অ্যাপ্লিকেশনকে দ্রুত এবং ইন্টারঅ্যাকটিভ করতে সহায়ক।

AJAX এবং CodeIgniter এর মধ্যে ইন্টিগ্রেশন কিভাবে কাজ করে?

AJAX এ ডেটা পাঠানো এবং গ্রহণ করা হয় JavaScript (বা jQuery) এর মাধ্যমে, এবং CodeIgniter এ এই ডেটা প্রক্রিয়া করা হয় Controller এবং Model এর মাধ্যমে। নিচে AJAX এবং CodeIgniter এর মধ্যে ইন্টিগ্রেশন করার জন্য ধাপে ধাপে প্রক্রিয়া দেওয়া হয়েছে।

AJAX এবং CodeIgniter ইন্টিগ্রেশন এর ধাপসমূহ

১. AJAX রিকোয়েস্ট পাঠানো

১.১ HTML ফর্ম তৈরি

ধরা যাক, আমরা একটি ফর্ম তৈরি করছি যেখানে ব্যবহারকারী তার নাম ইনপুট দিবে এবং আমরা সেটি AJAX এর মাধ্যমে পাঠাবো।

<form id="ajaxForm">
    <label for="username">Enter Your Name:</label>
    <input type="text" id="username" name="username">
    <button type="submit">Submit</button>
</form>

<div id="response"></div>

১.২ jQuery দিয়ে AJAX রিকোয়েস্ট পাঠানো

এখন, jQuery ব্যবহার করে ফর্মটি সাবমিট করা হবে এবং AJAX এর মাধ্যমে ডেটা পাঠানো হবে।

$(document).ready(function() {
    $("#ajaxForm").submit(function(event) {
        event.preventDefault();  // Form এর ডিফল্ট সাবমিশন বন্ধ করা

        var username = $("#username").val();  // ইনপুট থেকে ডেটা নেওয়া

        $.ajax({
            url: "<?php echo base_url('ajax/submit'); ?>",  // CodeIgniter Controller এর URL
            type: "POST",  // HTTP Method
            data: { username: username },  // ডেটা পাঠানো
            success: function(response) {  // রেসপন্স পাওয়ার পরে
                $("#response").html(response);  // রেসপন্স DOM-এ দেখানো
            }
        });
    });
});

২. CodeIgniter Controller তৈরি

২.১ AJAX রিকোয়েস্ট গ্রহণ এবং প্রক্রিয়া

AJAX রিকোয়েস্ট গ্রহণ করতে, একটি Controller তৈরি করতে হবে। এখানে আমরা ajax/submit URL দিয়ে AJAX রিকোয়েস্ট গ্রহণ করব।

namespace App\Controllers;

use CodeIgniter\Controller;

class AjaxController extends Controller
{
    public function submit()
    {
        // AJAX রিকোয়েস্ট থেকে ইনপুট গ্রহণ
        $username = $this->request->getPost('username');

        // এখানে আপনি আপনার লজিক বা ডেটাবেস অপারেশন করতে পারেন
        if ($username) {
            // যদি নাম প্রাপ্ত হয়, সাফল্য বার্তা পাঠানো
            return "Hello, " . $username . "!";
        } else {
            // যদি নাম না পাওয়া যায়, ত্রুটি বার্তা পাঠানো
            return "No username received!";
        }
    }
}

২.২ Route কনফিগারেশন

app/Config/Routes.php ফাইলে AJAX রিকোয়েস্টের জন্য route কনফিগার করুন:

$routes->post('ajax/submit', 'AjaxController::submit');

৩. AJAX এর মাধ্যমে CodeIgniter থেকে ডেটা গ্রহণ

ধরা যাক, আপনি AJAX এর মাধ্যমে ডাটাবেস থেকে ডেটা ফেচ করতে চান।

৩.১ Model তৈরি

প্রথমে, একটি Model তৈরি করুন যা ডাটাবেস থেকে ডেটা ফেচ করবে:

namespace App\Models;

use CodeIgniter\Model;

class ProductModel extends Model
{
    protected $table = 'products';
    protected $primaryKey = 'id';
    protected $allowedFields = ['name', 'description', 'price'];
}

৩.২ Controller থেকে AJAX রিকোয়েস্ট

AJAX রিকোয়েস্টে ডাটাবেস থেকে ডেটা পাঠাতে, Controller এ Model ব্যবহার করতে হবে।

namespace App\Controllers;

use App\Models\ProductModel;
use CodeIgniter\Controller;

class ProductController extends Controller
{
    public function getProducts()
    {
        $model = new ProductModel();
        $products = $model->findAll();

        // JSON রেসপন্স পাঠানো
        return $this->response->setJSON($products);
    }
}

৩.৩ Route কনফিগারেশন

app/Config/Routes.php ফাইলে getProducts এর জন্য route কনফিগার করুন:

$routes->get('ajax/products', 'ProductController::getProducts');

৩.৪ jQuery দিয়ে ডেটা ফেচ করা

AJAX এর মাধ্যমে ডেটা ফেচ করার জন্য jQuery কোড:

$(document).ready(function() {
    $.ajax({
        url: "<?php echo base_url('ajax/products'); ?>",
        type: "GET",
        success: function(response) {
            var products = JSON.parse(response);
            var html = "<ul>";
            products.forEach(function(product) {
                html += "<li>" + product.name + " - $" + product.price + "</li>";
            });
            html += "</ul>";
            $("#response").html(html);
        }
    });
});